import { Button, CheckBox, ListView } from "std-widgets.slint";
import { Callabler } from "callabler.slint";
import { ExcludedDirectoriesModel, IncludedDirectoriesModel } from "common.slint";
import { ColorPalette } from "color_palette.slint";
import { Settings } from "settings.slint";
import { Translations } from "translations.slint";

export component IncludedDirectories {
    in-out property <[IncludedDirectoriesModel]> model <=> Settings.included_directories_model;
    in-out property <int> current_index <=> Settings.included_directories_model_selected_idx;

    in-out property <length> size_referenced_folder: 33px;
    min-width: 50px;
    VerticalLayout {
        HorizontalLayout {
            spacing: 5px;
            Text {
                text <=> Translations.ref_text;
                width: size_referenced_folder;
                horizontal-alignment: center;
            }

            Text {
                horizontal-stretch: 1.0;
                text <=> Translations.path_text;
            }
        }

        ListView {
            for r[idx] in model: Rectangle {
                height: 30px;
                border_radius: 5px;
                width: parent.width;

                background: ColorPalette.get_listview_color(r.selected_row, touch-area.has-hover);
                touch_area := TouchArea {
                    clicked => {
                        handle_click(true);
                    }
                    double-clicked => {
                        Callabler.open_item(r.path);
                        handle_click(false);
                    }
                    pointer-event(event) => {
                        if (event.button == PointerEventButton.right && event.kind == PointerEventKind.up) {
                            Callabler.open_parent(r.path);
                        }
                    }

                    function handle_click(can_unselect: bool) {
                        if (current_index != -1) {
                            if (current_index != idx) {
                                model[current_index].selected_row = false;
                            } else if (can_unselect) {
                                r.selected_row = false;
                                current_index = -1;
                                return;
                            }
                        }
                        r.selected_row = true;
                        current_index = idx;
                    }
                }

                HorizontalLayout {
                    padding-left: 7.5px;
                    spacing: 5px;
                    width: parent.width;

                    CheckBox {
                        checked: r.referenced_folder;
                        toggled => {
                            model[idx].referenced_folder = self.checked;
                        }
                        width: size_referenced_folder;
                    }


                    HorizontalLayout {
                        horizontal-stretch: 1.0;
                        padding-left: 5px;
                        Text {
                            horizontal-stretch: 1.0;
                            height: parent.height;
                            text: r.path;
                            vertical-alignment: center;
                        }

                        Button {
                            width: 50px;
                            horizontal-stretch: 1.0;
                            icon: @image-url("../icons/krokiet_delete.svg");
                            colorize-icon: true;
                            clicked => {
                                Callabler.remove_item_directories(true, idx);
                            }
                        }
                    }
                }
            }
        }
    }
}

export component ExcludedDirectories {
    in-out property <[ExcludedDirectoriesModel]> model <=> Settings.excluded_directories_model;
    in-out property <int> current_index <=> Settings.excluded_directories_model_selected_idx;

    min-width: 50px;
    VerticalLayout {
        HorizontalLayout {
            spacing: 5px;
            padding-left: 5px;
            Text {
                text <=> Translations.path_text;
            }
        }

        ListView {
            for r[idx] in model: Rectangle {
                height: 30px;
                border_radius: 5px;
                width: parent.width;

                background: ColorPalette.get_listview_color(r.selected_row, touch-area.has-hover);

                touch_area := TouchArea {
                    clicked => {
                        handle_click(true);
                    }
                    double-clicked => {
                        Callabler.open_item(r.path);
                        handle_click(false);
                    }
                    pointer-event(event) => {
                        if (event.button == PointerEventButton.right && event.kind == PointerEventKind.up) {
                            Callabler.open_parent(r.path);
                        }
                    }

                    function handle_click(can_unselect: bool) {
                        if (current_index != -1) {
                            if (current_index != idx) {
                                model[current_index].selected_row = false;
                            } else if (can_unselect) {
                                r.selected_row = false;
                                current_index = -1;
                                return;
                            }
                        }
                        r.selected_row = true;
                        current_index = idx;
                    }
                }

                HorizontalLayout {
                    width: parent.width;
                    padding-left: 5px;
                    Text {
                        horizontal-stretch: 1.0;
                        height: parent.height;
                        text: r.path;
                        vertical-alignment: center;
                    }

                    Button {
                        width: 50px;
                        horizontal-stretch: 1.0;
                        icon: @image-url("../icons/krokiet_delete.svg");
                        colorize-icon: true;
                        clicked => {
                            Callabler.remove_item_directories(false, idx);
                        }
                    }
                }
            }
        }
    }
}
